<!-- prettier-ignore -->
<template>
  <div class="dialog-box">
    <div class="box-content" style="width: 60%">
      <div class="content-header">
        <span>添加底图</span>
      </div>
      <div class="content-body">
        <el-form ref="addForm" :model="urlObj" :rules="rules" label-position="right" label-width="80px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="urlObj.name"></el-input>
          </el-form-item>
          <el-form-item label="url" prop="url">
            <el-input v-model="urlObj.url" :placeholder="exampleUrl"></el-input>
          </el-form-item>
          <el-form-item label="示例">
            <el-input v-model="exampleUrl" disabled></el-input>
          </el-form-item>
          <el-form-item class="submit-btn">
            <el-button  @click="$emit('cancel')">取消</el-button>
            <el-button type="primary" @click="confirm">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'addBaseMap',
  data(){
    return{
      urlObj:{
        name:'',
        url:''
      },
      baseMapName:'',
      baseMapUrl:'',
      exampleUrl:'/mapserver/{type}/WMTS/{version}/{serverName}/{styleId}/getTile/{TileMatrix}/{TileRow}/{TileCol}',
      rules:{
        name:[
          {required:true,message:'请输入底图名称',trigger:'blur'}
        ],
        url:[
          {required:true,message:'请输入url',trigger:'blur'}
        ]
      }
    }
  },
  methods:{
    confirm(){
      this.$refs.addForm.validate((valid)=>{
        if (valid){
          this.$emit('addUrl',this.urlObj)
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>

</style>